<template>
    <div class="user-info page">
        <div class="con">
            <div class="user">
                <img :src="user.avatar" alt="" class="avatar">
                <div class="info">
                    <div class="names">
                        <span class="name">{{user.name}}</span>

                    </div>
                    <div class="codes">
                        <span class="code">{{user.code}}</span>
                        <span class="mobile">{{user.mobile}}</span>
                    </div>
                </div>
            </div>

            <div class="labels">

                <label-btn :canClick="true" padding="0 0.426rem" nameColor="#6F6F6F" rightColor="#F7895E"
                           style="border-radius: 5px  ;margin-top: 10px " txtColor="#A1A1A1" height="1.3rem" name="级别"
                           :txt="level.name"
                           rightTxt="库存"></label-btn>

                <div class="accounts">
                    <label-btn class="account" v-for="(account,index) in accountList" :key="index" :canClick="true"
                               padding="0 0.426rem" nameColor="#6F6F6F" rightColor="#F7895E"
                               txtColor="#A1A1A1" height="1.3rem" :name="accountTypeOptions[account.type]"
                               txt="**"
                               @click.native="toTransferAccount(account.type)" rightTxt="转账"></label-btn>
                </div>


                <!--                <label-btn :canClick="true" padding="0 0.426rem" nameColor="#6F6F6F" rightColor="#F7895E"-->
                <!--                            txtColor="#A1A1A1"  height="1.3rem" name="会员级别" txt="大区"-->
                <!--                           rightTxt="库存"></label-btn>-->
                <!--                <label-btn :canClick="true" padding="0 0.426rem" nameColor="#6F6F6F" rightColor="#F7895E"-->
                <!--                           style="border-radius:  0 0 5px 5px  ;" txtColor="#A1A1A1"  height="1.3rem" name="会员级别" txt="大区"-->
                <!--                           rightTxt="库存"></label-btn>-->
            </div>

            <div class="transfer-goods" @click="toTransferGoods">
                给他拨货
            </div>

            <div class="level-up" @click="changeLevel">
                给他升级
            </div>

        </div>
    </div>
</template>

<script>
    import labelBtn from '@/components/base/label-btn'
    import {info, listLevel, changeLevel} from "@/api/user";
    import * as Dialog from '@/dialog'
    export default {
        name: "info",
        components: {
            labelBtn
        },
        activated() {
            let uid = this.$route.query.uid
            info(uid).then(res => {
                this.user = res.data
                this.accounts = res.extra.accounts
                this.level = res.extra.level
            })
            listLevel().then(res => {
                this.levels = res.data
            })
        },
        methods: {
            toTransferAccount(type) {
                let path = '/transfer/account'
                this.$router.push({
                    path, query: {
                        userId: this.user.id,
                        type: type
                    }
                })
            },
            changeLevel() {
                this.$createActionSheet({
                    title: '选择级别',
                    data: this.levelList,
                    onSelect: (item, index) => {
                        changeLevel(this.user.id,item.value).then(res=>{
                             this.level = res.data
                            console.log(this.level)
                            Dialog.showCorrect("升级成功!")
                        })
                    }
                }).show()
            },
            toTransferGoods() {
                let path = '/transfer/goods'
                this.$router.push({
                    path, query: {
                        userId: this.user.id,
                        name: this.user.name,
                        code: this.user.code
                    }
                })
            }
        },
        computed: {
            levelList() {
                let tems = []
                this.levels.forEach(level => {

                    let tem = {
                        content: level.name,
                        value: level.id
                    }
                    tems.push(tem)
                })
                return tems
            },
            accountList() {
                let ta = []
                this.accountTypeOptions.forEach((item, index) => {
                    let tem = {type: index, amount: 0}
                    this.accounts.forEach(it=>{
                        if(it.type == index){
                            tem = it
                        }
                    })
                    ta.push(tem)
                })

                return ta
            }
        },
        data() {

            return {
                levels: null,
                user: {},
                accounts: [],
                level: {},
                accountTypeOptions: ["现金券", "积分数", "优惠券"],
                store: []
            }
        }
    }
</script>

<style scoped lang="stylus">
    .user-info
        background url("~@/assets/hbg.png") no-repeat  $page-bg
        background-size 100% auto
        z-index 2

        .con
            padding 10px 10px 0

            .user
                border-radius 5px
                height 90px
                background-color white
                display flex
                align-items center

                .avatar
                    width 50px
                    height 50px
                    border-radius 50%
                    margin 0 20px

                .info
                    display flex
                    flex-direction column
                    justify-content space-between
                    align-items flex-start
                    font-size 0

                    .names

                        margin-bottom 10px

                        .name
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: rgba(111, 111, 111, 1);

                    .codes
                        .mobile
                            margin-left 10px
                            font-size: 10px;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color: rgba(161, 161, 161, 1);

                        .code
                            font-size: 14px;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color: rgba(161, 161, 161, 1);

            .accounts
                .account
                    &:first-child
                        margin-top 10px
                        border-radius 5px 5px 0 0

                    &:last-child
                        border-radius 0 0 5px 5px

            .transfer-goods, .level-up
                height 40px
                background-color #F7895E
                line-height 40px
                text-align center
                font-size 14px
                border-radius 20px
                color white
                margin-top 20px

            .level-up
                background-color #72A486

</style>